.puzzle-themes {
  h2 {
    @extend %box-padding-horiz, %roboto;

    margin-top: 1em;
  }

  &__list {
    display: grid;
    margin-left: var(--box-padding);
    grid-template-columns: repeat(auto-fill, minmax(50ch, 1fr));

    @include breakpoint($mq-not-xx-small) {
      grid-template-columns: repeat(auto-fill, minmax(40ch, 1fr));
    }

    &.puzzle-recommended {
      display: block;
    }
  }

  &__link {
    @extend %box-radius;

    display: flex;
    padding: 1.5em 1em 1.5em 0;

    &::before {
      @extend %data-icon;

      content: '';
      color: $c-font-dimmer;
      flex: 0 0 1.6em;
      text-align: center;
      font-size: 4.5em;
    }

    &:hover {
      background: mix($c-bg-box, $c-link, 90%);

      &::before {
        color: $c-primary;
      }
    }

    @include breakpoint($mq-not-xx-small) {
      &::before {
        display: none;
      }

      padding-left: 1em;
    }

    > span {
      flex: 1 1 100%;
      margin: 0;
    }

    h3 {
      font-weight: normal;
      font-size: 1.7em;
      display: block;
      line-height: 1em;
      margin: 0.1em 0 0.25em 0;

      em {
        @extend %roboto;

        color: $c-font-dimmer;
        font-size: 0.8em;
        margin-left: 0.7ch;
        letter-spacing: -1px;
      }
    }

    .puzzle-recommended & {
      @extend %box-neat;

      font-size: 1.2em;
      background: mix($c-bg-box, $c-good, 80%);
      color: $c-good;
      margin: 2em 4em;

      &::before {
        color: $c-good;
      }

      > span {
        color: $c-font;
      }

      &:hover {
        background: mix($c-bg-box, $c-good, 74%);
      }

      @include breakpoint($mq-not-small) {
        margin: 2em var(--box-padding) 2em 0;
      }
    }
  }

  &__db {
    @extend %box-padding;

    text-align: center;
  }
}

.puzzle-of-player {
  &__form {
    input {
      margin-right: 1em;
      width: 30ch;
      display: inline-block;
    }
  }

  &__pager {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(12em, 1fr));
    align-content: start;
  }

  &__results {
    p {
      font-size: 1.5em;
      margin: 2em 0;
    }
  }

  &__puzzle {
    padding: 0.4em;

    &__meta {
      @extend %flex-between;
      font-size: 0.9em;
      padding: 0 0.3em;
    }

    &__rating {
    }

    &__id {
      opacity: 0;
      @include transition;
    }

    &:hover .puzzle-of-player__puzzle__id {
      opacity: 1;
    }
  }
}
